<template>
  <div class="viewport-wrapper">
    <div
        class="screen-container"
        :style="containerStyle"
    >
      <!-- 这里是您的监控大屏内容 -->
      <div class="dashboard-content">
        <div class="top-panel">
          <div class="logo">
            <img src="../../assets/nav-logo.png" />
            <div class="title">加热炉链路追踪系统</div>
          </div>
          <div class="right-nav">
            <div class="group">当前班组：<span>{{groupName}}</span></div>
            <div class="right">
              <div class="time">{{currentTime}}</div>
              <div class="menu">
                <div
                    class="menu-item"
                    :class="{ active: activeMenu === 'monitor' }"
                    @click="setActiveMenu('monitor')"
                >实时监控</div>
                <div
                    class="menu-item"
                    :class="{ active: activeMenu === 'trace' }"
                    @click="setActiveMenu('trace')"
                >钢坯追溯</div>
                <div
                    class="menu-item"
                    :class="{ active: activeMenu === 'history' }"
                    @click="setActiveMenu('history')"
                >历史详情</div>
              </div>
              <div class="logo"></div>
            </div>
          </div>
        </div>
        <!--总体指标-->
        <div class="middle-panel">
          <div class="index-list" >
            <div class="index-item" v-for="(item, index) in indexList" :key="index">
              <div class="index-name"><div class="decorate"></div>{{item.label}}</div>
              <!--如果item.value > item.setValue 变成红色 否则就正常颜色-->
              <div class="index-value" :style="{ color: item.setValue != null && item.value > item.setValue ? '#e25b68' : '#7EF6FC' }">{{item.value}}</div>
            </div>
          </div>
        </div>
        <!--炉段指标-->
        <div class="section-panel">
          <!--炉段指标-->
          <div class="section-left">
            <div class="title"><img src="../../assets/img/一级标题样式.png"/><span>炉段指标</span></div>
            <div class="left-content">
              <el-table
                  :data="sectionData"
                  style="width: 100%; height: 100%;"
                  :header-cell-style="tableHeaderStyle"
                  :cell-style="tableCellStyle"
                  :row-style="tableRowStyle"
                  empty-text="暂无数据"
              >
                <!-- 第一列固定宽度 -->
                <el-table-column
                    v-if="headerList.length > 0"
                    :prop="headerList[0].prop"
                    :label="headerList[0].label"
                    width="150"
                    align="center"
                >
                </el-table-column>
                <!-- 其余列自动宽度 -->
                <el-table-column
                    v-for="(item, index) in headerList.slice(1)"
                    :key="index + 1"
                    :prop="item.prop"
                    :label="item.label"
                    align="center"
                >
                </el-table-column>
              </el-table>
            </div>
          </div>
          <!--出炉评价-->
          <div class="section-right">
            <div class="title"><img src="../../assets/img/一级标题样式.png"/><span>出炉评价</span></div>
            <div class="right-content">
              <div ref="chart" style="width: 100%; height: 100%;"></div>
            </div>
          </div>
        </div>
        <div class="bottom-panel">
          <div class="title"><img src="../../assets/img/一级标题样式.png"/><span>板坯跟踪</span></div>
          <div class="bottom-content">
            <div class="furnace-tracking-container">
              <div class="furnace" ref="furnaceChart" style="width: 100%; height: 100%;">
                <div class="furnace-container">
                  <div id="furnace" ref="furnaceElement">
                    <!-- 炉墙 -->
                    <div class="furnace-wall top-wall"></div>
                    <div class="furnace-wall bottom-wall"></div>
                    <div class="furnace-wall left-wall"></div>
                    <div class="furnace-wall right-wall"></div>

                    <!-- 炉段背景 -->
                    <div
                        v-for="section in furnaceSections"
                        :key="section.name"
                        class="furnace-section"
                        :class="section.className"
                        :style="section.style"
                    >
                      <div :style="section.textStyle">{{ section.text }}</div>
                    </div>

                    <!-- 钢坯位置 -->
                    <div
                        v-for="(slab, index) in slabData"
                        :key="index"
                        class="slab"
                        :style="getSlabStyle(slab)"
                        @mouseenter="showSlabInfo(slab, index, $event)"
                        @mouseleave="hideSlabInfo"
                        :class="{ highlighted: highlightedSlabIndex === index }"
                    >
                      <div class="slab-number">{{ slab.slab }}</div>
                    </div>

                    <!-- 钢坯信息卡片 -->
                    <div
                        v-if="showSlabCard"
                        class="slab-info-card"
                        :style="slabCardStyle"
                        @mouseenter="keepCardVisible"
                        @mouseleave="hideSlabInfo"
                    >
                      <div class="card-header">
                        <h3>钢坯信息</h3>
                        <div class="close-btn" @click="hideSlabInfo">×</div>
                      </div>
                      <div class="card-content">
                        <div class="info-item">
                          <span class="label">钢坯号:</span>
                          <span class="value">{{ currentSlabInfo.slab }}</span>
                        </div>
                        <div class="info-item">
                          <span class="label">当前位置:</span>
                          <span class="value">{{ currentSlabInfo.pos }} 米</span>
                        </div>
                        <div class="info-item">
                          <span class="label">所属炉段:</span>
                          <span class="value">{{ currentSlabInfo.section }}</span>
                        </div>
                        <div class="info-item">
                          <span class="label">入炉时间:</span>
                          <span class="value">{{ currentSlabInfo.entryTime }}</span>
                        </div>
                        <div class="info-item">
                          <span class="label">在炉时长:</span>
                          <span class="value">{{ currentSlabInfo.duration }}</span>
                        </div>
                        <div class="info-item">
                          <span class="label">当前钢温:</span>
                          <span class="value">{{ currentSlabInfo.temperature }} ℃</span>
                        </div>

                        <div class="info-item">
                          <span class="label">状态:</span>
                          <span class="value status" :class="currentSlabInfo.statusClass">
                            {{ currentSlabInfo.status }}
                          </span>
                        </div>
                      </div>
                      <div class="card-footer">
                        <a href="javascript:void(0)" class="detail-link" @click="goToDetail">
                          钢坯追溯 →
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 标尺 -->
                <div class="scale-markers">
                  <div class="scale-marker">0m</div>
                  <div class="scale-marker">{{ midScale }} m</div>
                  <div class="scale-marker">{{ endScale }} m</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {getTopListApi, getSectionListApi, getSectionHeadersApi} from "@/api/furnace";

export default {
  name: 'MonitorPage',
  data() {
    return {
      designWidth: 1920,
      designHeight: 1080,
      windowWidth: 0,
      windowHeight: 0,
      scale: 1,

      // 菜单状态
      activeMenu: 'monitor',

      // 数据
      groupName: '甲班',
      currentTime: '',
      // 总体指标列表
      indexList: [
        {label: '热值(KJ/m³)', value: 2536},
        {label: '在炉块数(块)', value: 10},
        {label: '煤气压力(Pa)', value: 11.82},
        {label: '煤气流量(m³/h)', value: 11.82},
        {label: '空气压力(Pa)', value: 11.82},
        {label: '空气流量(m³/h)', value: 11.82},
        {label: '煤烟温度(℃)', value: 11.82},
        {label: '空烟温度(℃)', value: 11.82},
        {label: '最低入炉温度（℃）', value: 11.82},
      ],
      headerList: [
        {label: '指标项', prop: 'indexName'},
        {label: '预热段', prop: 'pre'},
        {label: '加热段', prop: 'heat'},
        {label: '均热段', prop: 'soak'}
      ],
      sectionData: [
        {
          indexItem: '炉温(℃)',
          pre: '850',
          heat: '1250',
          soak: '1180'
        },
        {
          indexItem: '炉压(Pa)',
          pre: '12.5',
          heat: '15.3',
          soak: '13.8'
        },
        {
          indexItem: '煤气流量(m³/h)',
          pre: '2850',
          heat: '3200',
          soak: '2950'
        },
        {
          indexItem: '空气流量(m³/h)',
          pre: '2850',
          heat: '3200',
          soak: '2950'
        },
        {
          indexItem: '空燃比',
          pre: '92.5',
          heat: '88.3',
          soak: '95.1'
        },
        {
          indexItem: '残氧量(%)',
          pre: '92.5',
          heat: '88.3',
          soak: '95.1'
        },
        {
          indexItem: '残氧量(%)',
          pre: '92.5',
          heat: '88.3',
          soak: '95.1'
        }
      ],

      // 折线图数据
      chartData: {
        xAxisData: ['1#', '2#', '3#', '4#', '5#', '6#', '7#', '8#', '9#', '10#'],
        series: [
          {
            name: '出炉温度',
            type: 'line',
            data: [1180, 1220, 1190, 1210, 1200, 1195, 1215, 1185, 1205, 1198],
            symbol: 'circle',
            symbolSize: 6
          },
          {
            name: 'RT2温度',
            type: 'line',
            data: [1150, 1170, 1160, 1180, 1175, 1165, 1185, 1155, 1178, 1162],
            symbol: 'circle',
            symbolSize: 6
          },
          {
            name: '综合评分',
            type: 'line',
            data: [88, 92, 85, 90, 89, 87, 93, 84, 91, 86],
            symbol: 'circle',
            symbolSize: 6,
            yAxisIndex: 1
          }
        ]
      },

      // 板坯跟踪
      initialSlabData: [
        {
          slab: "5304518T110",
          pos: 15.3,
          entryTime: "2024-01-15 08:30",
          temperature: 850,
          estimatedTime: "2024-01-15 10:45",
          duration: "2 分",
          status: "预热中"
        },
        {
          slab: "5304522T220",
          pos: 25,
          entryTime: "2024-01-15 08:15",
          temperature: 1050,
          estimatedTime: "2024-01-15 10:30",
          duration: "2 小时 09 分",
          status: "加热中"
        },
        {
          slab: "5304519T110",
          pos: 30.5,
          entryTime: "2024-01-15 08:00",
          temperature: 1150,
          estimatedTime: "2024-01-15 10:15",
          duration: "1 小时 30 分",
          status: "加热中"
        },
        {
          slab: "5304517T110",
          pos: 35.5,
          entryTime: "2024-01-15 07:45",
          temperature: 1200,
          estimatedTime: "2024-01-15 10:00",
          duration: "1 小时 30 分",
          status: "均热中"
        },
        {
          slab: "5304521T220",
          pos: 39,
          entryTime: "2024-01-15 07:30",
          temperature: 1180,
          estimatedTime: "2024-01-15 09:45",
          duration: "49 分",
          status: "均热中"
        },
        {
          slab: "5304494T210",
          pos: 54.5,
          entryTime: "2024-01-15 07:15",
          temperature: 1220,
          estimatedTime: "2024-01-15 09:30",
          duration: "1 小时 30 分",
          status: "即将出炉"
        }
      ],
      slabData: [],
      highlightedSlabIndex: -1,

      // 钢坯信息卡片
      showSlabCard: false,
      currentSlabInfo: {},
      slabCardStyle: {},
      cardTimer: null,

      // 加热炉和钢坯参数
      furnaceWidth: 12,
      furnaceLength: 60,
      slabLength: 10,
      slabWidth: 0.8,

      // 刻度线
      midScale: 30,
      endScale: 60,

      // 炉段配置
      furnaceSections: [
        {
          name: 'preheat',
          className: 'preheat-section',
          text: '预热段',
          style: {},
          textStyle: {
            color: '#5a94d7',
            fontSize: '18px',
            fontWeight: 'bold',
            textShadow: '1px 1px 2px rgba(0,0,0,0.5)'
          },
          range: [0, 21]
        },
        {
          name: 'heating',
          className: 'heating-section',
          text: '加热段',
          style: {},
          textStyle: {
            color: '#5a94d7',
            fontSize: '18px',
            fontWeight: 'bold',
            textShadow: '1px 1px 2px rgba(0,0,0,0.5)'
          },
          range: [21, 47]
        },
        {
          name: 'soaking',
          className: 'soaking-section',
          text: '均热段',
          style: {},
          textStyle: {
            color: '#5a94d7',
            fontSize: '18px',
            fontWeight: 'bold',
            textShadow: '1px 1px 2px rgba(0,0,0,0.5)'
          },
          range: [47, 60]
        }
      ],

      // 定时器
      timeInterval: null,
      chart: null
    }
  },
  computed: {
    containerStyle() {
      return {
        transform: `scale(${this.scale}) translate(-50%, -50%)`
      }
    }
  },
  mounted() {
    this.startPolling();
    this.updateScale();
    window.addEventListener('resize', this.debouncedUpdateScale);
    window.addEventListener('orientationchange', this.debouncedUpdateScale);

    this.initChart();
    this.initTime();
    this.initFurnace();

    // 初始化炉段样式
    this.$nextTick(() => {
      this.setFurnaceSections();
      this.renderSlabs();
    });
  },
  beforeDestroy() {
    this.stopPolling();
    window.removeEventListener('resize', this.debouncedUpdateScale);
    window.removeEventListener('orientationchange', this.debouncedUpdateScale);

    if (this.timeInterval) {
      clearInterval(this.timeInterval);
    }

    if (this.chart) {
      this.chart.dispose();
    }

    if (this.cardTimer) {
      clearTimeout(this.cardTimer);
    }
  },
  methods: {
    // 获取顶部列表数据
    getTopList() {
      getTopListApi().then(res => {
        this.indexList = res.data;
      }).finally(() => {
        // 无论成功失败，都继续下一次轮询
        this.continuePolling();
      });
    },

    getSectionList() {
      getSectionListApi().then(res => {
        this.sectionData = res.data;
      }).finally(() => {
        // 无论成功失败，都继续下一次轮询
        this.continuePolling();
      });
    },

    getSectionHeaders() {
      getSectionHeadersApi().then(res => {
        this.headerList = res.data;
      }).finally(() => {
        // 无论成功失败，都继续下一次轮询
        this.continuePolling();
      });
    },
    // 开始轮询
    startPolling() {
      this.isPolling = true;
      this.getTopList(); // 立即执行第一次
      this.getSectionHeaders();
      this.getSectionList();
    },
    // 继续轮询
    continuePolling() {
      if (!this.isPolling) return;

      // 清除之前的定时器
      if (this.pollTimer) {
        clearTimeout(this.pollTimer);
      }
      // 设置下一次轮询
      this.pollTimer = setTimeout(() => {
        this.getTopList();
        this.getSectionHeaders();
        this.getSectionList();
      }, 2000); // 5秒后再次执行
    },
    // 停止轮询
    stopPolling() {
      this.isPolling = false;
      if (this.pollTimer) {
        clearTimeout(this.pollTimer);
        this.pollTimer = null;
      }
    },

    // 时间初始化
    initTime() {
      this.updateTime();
      this.timeInterval = setInterval(this.updateTime, 1000);
    },

    updateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const weekday = weekdays[now.getDay()];
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');

      this.currentTime = `${year}/${month}/${day}  ${weekday}  ${hours}:${minutes}:${seconds}`;
    },

    // 菜单切换
    setActiveMenu(menu) {
      this.activeMenu = menu;
    },

    // 缩放控制
    updateScale() {
      this.windowWidth = window.innerWidth;
      this.windowHeight = window.innerHeight;

      const scaleX = this.windowWidth / this.designWidth;
      const scaleY = this.windowHeight / this.designHeight;

      this.scale = Math.min(scaleX, scaleY);
    },

    debounce(func, wait) {
      let timeout;
      return function executedFunction(...args) {
        const later = () => {
          clearTimeout(timeout);
          func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
      };
    },

    // 表格样式
    tableRowStyle() {
      return {
        'background-color': 'transparent'
      };
    },

    tableHeaderStyle() {
      return {
        'background-color': 'rgba(15, 28, 60, 0.8)',
        'color': '#7EF6FC',
        'font-size': '16px',
        'border-bottom': '1px solid #0bc0d0',
        'text-align': 'center',
        'font-weight': 'bold',
        'height': '45px'
      };
    },

    tableCellStyle() {
      return {
        'background-color': 'rgba(9, 64, 131, 0.3)',
        'color': '#ffffff',
        'font-size': '14px',
        'border-bottom': '1px solid rgba(11, 192, 208, 0.3)',
        'text-align': 'center',
        'padding': '8px 0',
        'height': '40px',
      };
    },

    // 图表初始化
    initChart() {
      const chartDom = this.$refs.chart;
      this.chart = echarts.init(chartDom);

      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(15, 28, 60, 0.9)',
          borderColor: '#0bc0d0',
          borderWidth: 1,
          textStyle: {
            color: '#7EF6FC'
          },
          axisPointer: {
            lineStyle: {
              color: '#0bc0d0'
            }
          }
        },
        legend: {
          data: ['出炉温度', 'RT2温度', '综合评分'],
          right: '10%',
          top: 10,
          textStyle: {
            color: '#7EF6FC',
            fontSize: 12
          },
          itemWidth: 12,
          itemHeight: 8,
          itemGap: 15
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.chartData.xAxisData,
          axisLine: {
            lineStyle: {
              color: '#0bc0d0'
            }
          },
          axisLabel: {
            color: '#7EF6FC',
            fontSize: 12
          },
          splitLine: {
            show: false
          }
        },
        yAxis: [
          {
            type: 'value',
            min: 1100,
            max: 1250,
            axisLine: {
              lineStyle: {
                color: '#0bc0d0'
              }
            },
            axisLabel: {
              color: '#7EF6FC',
              fontSize: 12
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(11, 192, 208, 0.3)',
                type: 'dashed'
              }
            }
          },
          {
            type: 'value',
            min: 80,
            max: 100,
            axisLine: {
              lineStyle: {
                color: '#0bc0d0'
              }
            },
            axisLabel: {
              color: '#7EF6FC',
              fontSize: 12
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: this.chartData.series.map((series, index) => {
          const colors = ['#E24D42', '#7eb26d', '#F9BA8F'];
          return {
            ...series,
            lineStyle: {
              width: 2,
              color: colors[index]
            },
            itemStyle: {
              color: colors[index]
            },
            areaStyle: series.name === '综合评分' ? null : {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: colors[index] + '40'},
                {offset: 1, color: colors[index] + '10'}
              ])
            }
          };
        })
      };

      this.chart.setOption(option);

      window.addEventListener('resize', () => {
        this.chart.resize();
      });
    },

    // 加热炉初始化
    initFurnace() {
      this.slabData = [...this.initialSlabData];
      this.midScale = this.furnaceLength / 2;
      this.endScale = this.furnaceLength;
    },

    // 设置炉段样式
    setFurnaceSections() {
      const furnaceElement = this.$refs.furnaceElement;
      if (!furnaceElement) return;

      // 预热段 (0-21米)
      this.furnaceSections[0].style = {
        position: 'absolute',
        left: '15px',
        top: '15px',
        width: `${(21 / this.furnaceLength) * 100}%`,
        height: 'calc(100% - 30px)',
        backgroundColor: '#002f64',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: '1'
      };

      // 加热段 (21-47米)
      this.furnaceSections[1].style = {
        position: 'absolute',
        left: `${(21 / this.furnaceLength) * 100}%`,
        top: '15px',
        width: `${((47 - 21) / this.furnaceLength) * 100}%`,
        height: 'calc(100% - 30px)',
        backgroundColor: 'rgba(92,128,236,0.3)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: '0'
      };

      // 均热段 (47-60米)
      this.furnaceSections[2].style = {
        position: 'absolute',
        left: `${(47 / this.furnaceLength) * 100}%`,
        top: '15px',
        width: `Calc(${((60 - 47) / this.furnaceLength) * 100}% - 15px)`,
        height: 'calc(100% - 30px)',
        backgroundColor: 'rgba(10,181,236,0.3)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: '0'
      };
    },

    // 渲染钢坯
    renderSlabs() {
      const furnaceElement = this.$refs.furnaceElement;
      if (!furnaceElement) return;

      const pixelsPerMeterLength = furnaceElement.clientWidth / this.furnaceLength;
      const pixelsPerMeterWidth = furnaceElement.clientHeight / this.furnaceWidth;

      this.slabData.forEach((slab, index) => {
        const left = slab.pos * pixelsPerMeterLength;
        const height = this.slabLength * pixelsPerMeterWidth;
        const width = this.slabWidth * pixelsPerMeterLength;
        const top = (furnaceElement.clientHeight - height) / 2;

        // 更新钢坯样式
        this.$set(this.slabData, index, {
          ...slab,
          style: {
            marginLeft: `${left}px`,
            marginTop: `${top}px`,
            width: `${width}px`,
            height: `${height}px`
          }
        });
      });
    },

    // 获取钢坯样式
    getSlabStyle(slab) {
      return {
        ...slab.style,
        background: slab.highlighted
            ? 'linear-gradient(135deg, #ff9900, #ff6600)'
            : 'linear-gradient(135deg, #4a9ff2, #3c97f1)'
      };
    },

    // 显示钢坯信息卡片
    showSlabInfo(slab, index, event) {
      this.highlightedSlabIndex = index;
      this.$set(this.slabData[index], 'highlighted', true);

      // 清除之前的定时器
      if (this.cardTimer) {
        clearTimeout(this.cardTimer);
      }

      // 获取钢坯所在炉段
      const section = this.getSlabSection(slab.pos);

      // 设置状态样式
      const statusClass = this.getStatusClass(slab.status);

      // 准备钢坯信息
      this.currentSlabInfo = {
        ...slab,
        section: section,
        statusClass: statusClass
      };

      // 设置卡片位置
      this.setCardPosition(event);

      // 显示卡片
      this.showSlabCard = true;
    },

    // 获取钢坯所在炉段
    getSlabSection(pos) {
      if (pos <= 21) return '预热段';
      if (pos <= 47) return '加热段';
      return '均热段';
    },

    // 获取状态样式类
    getStatusClass(status) {
      const statusMap = {
        '预热中': 'status-preheating',
        '加热中': 'status-heating',
        '均热中': 'status-soaking',
        '即将出炉': 'status-ready'
      };
      return statusMap[status] || '';
    },

    // 设置卡片位置
    setCardPosition(event) {
      const furnaceElement = this.$refs.furnaceElement;
      if (!furnaceElement) return;

      const rect = furnaceElement.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;

      // 卡片尺寸
      const cardWidth = 280;
      const cardHeight = 320;

      // 计算位置，确保卡片不会超出容器
      let left = x + 20;
      let top = y - cardHeight / 2;

      // 水平边界检查
      if (left + cardWidth > rect.width) {
        left = x - cardWidth - 20;
      }

      // 垂直边界检查
      if (top < 10) {
        top = 10;
      }
      if (top + cardHeight > rect.height - 10) {
        top = rect.height - cardHeight - 10;
      }

      this.slabCardStyle = {
        left: `${left}px`,
        top: `${top}px`,
        position: 'absolute'
      };
    },

    // 保持卡片可见（当鼠标移动到卡片上时）
    keepCardVisible() {
      if (this.cardTimer) {
        clearTimeout(this.cardTimer);
      }
    },

    // 隐藏钢坯信息卡片
    hideSlabInfo() {
      // 设置延迟隐藏，避免鼠标移动到卡片时立即消失
      this.cardTimer = setTimeout(() => {
        this.showSlabCard = false;
        this.highlightedSlabIndex = -1;
        this.slabData.forEach((slab, index) => {
          this.$set(this.slabData[index], 'highlighted', false);
        });
      }, 100);
    },

    // 跳转到详情页面
    goToDetail() {
      // 这里可以添加跳转逻辑
      alert(`跳转到钢坯 ${this.currentSlabInfo.slab} 的详情页面`);
      // this.$router.push(`/slab-detail/${this.currentSlabInfo.slab}`);
    }
  },
  created() {
    this.debouncedUpdateScale = this.debounce(this.updateScale, 250);
  }
}
</script>

<style scoped lang="scss">
@font-face {
  font-family: 'Digital-7';
  src: url('../../assets/font/digital-7.regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.viewport-wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: black;
}

.screen-container {
  position: absolute;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  left: 50%;
  top: 50%;
  transition: transform 0.3s ease;
}

.dashboard-content {
  width: 100%;
  height: 100%;
  background-color: #0f1c3c;
  background-image: url("../../assets/app-bg.png");
  color: white;

  .top-panel {
    margin: 1%;
    display: flex;
    height: 8%;
    width: 100%;
    align-items: center;

    .logo {
      height: 66px;
      width: 30%;
      display: flex;

      img {
        height: 100%;
        width: 100%;
      }

      .title {
        margin-left: -380px;
        height: 100%;
        width: 300px;
        font-size: 30px;
        display: flex;
        align-items: center;
      }
    }

    .right-nav {
      display: flex;
      justify-items: center;
      justify-content: space-between;
      align-items: center;
      width: 70%;
      background-image: url("../../assets/img/导航分割线.png");
      background-position: bottom;
      background-repeat: no-repeat;
      height: 100%;

      .group {
        margin-left: 40px;
        font-size: 18px;

        span {
          border: 1px solid #0bc0d0;
          border-radius: 4px;
          background-color: #094083;
          padding: 5px 17px;
          cursor: pointer;
        }
      }

      .right {
        width: 70%;
        display: flex;
        justify-content: right;
        align-items: center;
        margin-right: 60px;

        .time {
          width: 240px;
          font-size: 18px;
        }

        .menu {
          display: flex;

          .menu-item {
            margin: 4px;
            font-size: 16px;
            border: 1px solid #0bc0d0;
            border-radius: 4px;
            padding: 5px 17px;
            background-color: #0f1c3c;
            cursor: pointer;
            transition: all 0.3s ease;

            &.active {
              background-color: #094083;
              color: #7EF6FC;
              box-shadow: 0 0 10px rgba(11, 192, 208, 0.5);
            }
          }

          .menu-item:hover {
            background-color: #094083;
          }
        }

        .logo {
          background-image: url("../../assets/img/编组25.png");
          background-position: right;
          background-repeat: no-repeat;
          width: 150px;
        }
      }
    }
  }

  .middle-panel {
    width: 100%;
    height: 10%;
    background-image: url("../../assets/img/背景.png");
    background-position: center;
    background-repeat: no-repeat;

    .index-list {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      justify-items: center;
      align-items: center;

      .index-item {
        .index-name {
          display: flex;
          align-items: center;

          .decorate {
            width: 10px;
            height: 10px;
            margin-right: 5px;
            transform: rotate(45deg);
            background-color: #7ef6fc;
          }
        }

        .index-value {
          font-family: 'Digital-7', monospace;
          font-size: 40px;
          color: #7EF6FC;
          letter-spacing: -0.11px;
          font-weight: 400;
        }
      }
    }
  }

  .section-panel {
    padding: 1%;
    width: 100%;
    height: 30%;
    display: flex;

    .section-left {
      width: 60%;
      height: 100%;

      .title {
        font-size: 18px;
        margin-bottom: 10px;

        span {
          padding-left: 5px;
        }
      }

      .left-content {
        width: 100%;
        height: 100%;
        background-image: url("../../assets/img/编组 48.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        // 表格自定义样式
        ::v-deep .el-table {
          background-color: transparent;

          // 表头样式
          .el-table__header-wrapper {
            background-color: rgba(15, 28, 60, 0.9);
          }

          // 表格主体样式
          .el-table__body-wrapper {
            background-color: transparent;

            // 隔行变色效果
            tr:nth-child(odd) {
              background-color: rgba(9, 64, 131, 0.2);
            }

            tr:nth-child(even) {
              background-color: rgba(15, 28, 60, 0.2);
            }
          }

          // 单元格样式
          .el-table__cell {
            border-bottom: 1px solid rgba(11, 192, 208, 0.3);
            background-color: transparent;
          }

          // 滚动条样式
          &::-webkit-scrollbar {
            width: 6px;
            height: 6px;
          }

          &::-webkit-scrollbar-thumb {
            border-radius: 3px;
            background: rgba(11, 192, 208, 0.5);
          }
        }
      }
    }

    .section-right {
      margin-left: 10px;
      width: 40%;
      height: 100%;

      .title {
        font-size: 18px;
        margin-bottom: 10px;

        span {
          padding-left: 5px;
        }
      }

      .right-content {
        width: 100%;
        height: 100%;
        background-image: url("../../assets/img/编组 48.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
  }

  .bottom-panel {
    padding: 1%;
    width: 100%;
    height: 45%;

    .title {
      font-size: 18px;
      margin-bottom: 10px;

      span {
        padding-left: 5px;
      }
    }

    .bottom-content {
      width: 100%;
      height: 100%;
      background-image: url("../../assets/img/编组 48.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      text-align: center;

      .furnace-tracking-container {
        width: 100%;
        height: 100%;

        .furnace {
          .furnace-container {
            position: relative;
            width: 100%;
            height: 100%;
            border: 2px solid #bdc3c7;
            border-radius: 6px;
            overflow: hidden;
            margin: 10px 0;
          }
        }

        #furnace {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }

        .furnace-wall {
          position: absolute;
          background-color: #7f8c8d;
        }

        .top-wall, .bottom-wall {
          left: 0;
          width: 100%;
          height: 15px;
        }

        .top-wall {
          top: 0;
        }

        .bottom-wall {
          bottom: 0;
        }

        .left-wall, .right-wall {
          top: 0;
          width: 15px;
          height: 100%;
        }

        .left-wall {
          left: 0;
        }

        .right-wall {
          right: 0;
        }
      }
    }
  }
}

.slab {
  position: absolute;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  font-size: 14px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  z-index: 1;
  cursor: pointer;

  &.highlighted {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    z-index: 10;
  }
}

.slab:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

// 钢坯信息卡片样式
.slab-info-card {
  width: 280px;
  background: linear-gradient(135deg, rgba(15, 28, 60, 0.95), rgba(9, 64, 131, 0.95));
  border: 1px solid #0bc0d0;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  z-index: 1000;
  animation: fadeIn 0.3s ease;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(11, 192, 208, 0.3);

    h3 {
      margin: 0;
      color: #7EF6FC;
      font-size: 18px;
      font-weight: bold;
    }

    .close-btn {
      color: #7EF6FC;
      font-size: 20px;
      cursor: pointer;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: rgba(11, 192, 208, 0.3);
      }
    }
  }

  .card-content {
    padding: 20px;

    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .label {
        color: #7EF6FC;
        font-size: 14px;
        font-weight: 500;
      }

      .value {
        color: #ffffff;
        font-size: 14px;
        font-weight: 400;

        &.status {
          padding: 2px 8px;
          border-radius: 12px;
          font-size: 12px;
          font-weight: bold;

          &.status-preheating {
            background-color: rgba(144, 238, 144, 0.3);
            color: #90ee90;
          }

          &.status-heating {
            background-color: rgba(65, 105, 225, 0.3);
            color: #4169e1;
          }

          &.status-soaking {
            background-color: rgba(255, 165, 0, 0.3);
            color: #ffa500;
          }

          &.status-ready {
            background-color: rgba(220, 20, 60, 0.3);
            color: #dc143c;
          }
        }
      }
    }
  }

  .card-footer {
    padding: 15px 20px;
    border-top: 1px solid rgba(11, 192, 208, 0.3);
    text-align: center;

    .detail-link {
      color: #7EF6FC;
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      transition: color 0.3s ease;

      &:hover {
        color: #0bc0d0;
        text-decoration: underline;
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scale-markers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 15px;
  margin-top: 5px;
}

.scale-marker {
  font-size: 12px;
  color: #7f8c8d;
}

.furnace-section {
  transition: all 0.3s ease;
  border-left: 1px dashed rgba(255,255,255,0.5);
  border-right: 1px dashed rgba(255,255,255,0.5);
}

.preheat-section {
  border-left: none;
}

.soaking-section {
  border-right: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .control-panel {
    flex-direction: column;
    align-items: flex-start;
  }

  .furnace-container {
    height: 200px;
  }
}
</style>